<template>
	<view class="">

		<view class="uploadBlock">
			<view class="title">{{pageTitle}}</view>
			<view class="fileList">
				<view class="item" v-for="(item,index) in filesList" :key="index">
					<view class="pic">
						<u-icon size="130" @click="toViewPdf(item.url)"
							name="https://supply.zhongyimotor.com/upload/applet/fileIcon.png"></u-icon>
						<view class="remove" @click="removeItem(index)"><u-icon color="#d81e06" name="close-circle-fill"
								size="40"></u-icon></view>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
			</view>
			<view class="uploadBox" @click="choosefile">
				<img src="https://supply.zhongyimotor.com/upload/applet/upload@3x.png" alt="">
			</view>

		</view>
		<u-button type="primary" @click="submit" :disabled="isDisable">确认上传</u-button>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: "",
				filesList: [],
				action: "",
				pageTitle: "",
				completedList: [],
				isDisable: true
			}
		},
		onLoad(option) {
			this.uploadType(option)
		},
		onShow() {
			this.action = this.$config.uploadFileUrl
		},
		methods: {
			uploadType(option) {
				this.type = option.type
				switch (this.type) {
					case "contract":
						this.pageTitle = "请上传签署后的合同文件(可多个合同一并上传)"
						this.orderId = option.orderId
						break;
					case "bond":
						this.pageTitle = "请上传保证金支付凭证"
						this.maxCount = 1
						this.orderId = option.orderId
						break;
					case "loan":
						this.pageTitle = "请上传还款凭证"
						this.maxCount = 1
						this.orderId = option.orderId
						break;
					default:
						this.pageTitle = "请上传文件"
						break;
				}
			},
			removeItem(index) {
				this.filesList.splice(index, 1)
				if (this.filesList.length == 0) {
					this.isDisable = false
				}
			},
			toViewPdf(path) {
				this.viewPdf(path)
			},
			uploadFiles(item) {
				let that = this
				uni.uploadFile({
					url: that.action,
					filePath: item.path,
					name: 'uploadFile',
					success: (res) => {
						let data = JSON.parse(res.data)
						that.completedList.push(data.result.url)
						that.filesList.push({
							url: data.result.url,
							name: item.name
						})
						that.isDisable = false
					},
					complete(res) {}
				});
			},
			choosefile() {
				let that = this
				uni.chooseMessageFile({
					count: 9, //默认100
					success: function(res) {
						const tempFiles = res.tempFiles;
						tempFiles.forEach(async (item, index) => {
							await that.uploadFiles(item)
						})
					}
				});
			},
			submit() {
				let that = this
				that.isDisable = true
				switch (that.type) {
					case "contract":
						var params = {
							files: that.completedList,
							orderId: this.orderId
						}
						that.$api.signContract(params).then((res) => {
							if (res.resultCode == 0) {
								that.uploadSuccess()
							}
						})
						break;
					case "bond":
						var params = {
							marginPath: that.completedList[0],
							orderId: this.orderId
						}
						that.$api.uploadMargin(params).then((res) => {
							if (res.resultCode == 0) {
								that.uploadSuccess()
							}
						})
						break;
					case "loan":
						var params = {
							repaymentPath: that.completedList[0],
							orderId: this.orderId
						}
						that.$api.uploadRepayment(params).then((res) => {
							if (res.resultCode == 0) {
								that.uploadSuccess()
							}
						})
						break;
				}
			},
			uploadSuccess() {
				let that = this
				uni.showToast({
					title: '上传成功',
					icon: "success",
					duration: 2000,
					success: () => {
						setTimeout(() => {
							that.isDisable = false
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2]
							uni.navigateBack({
								delta: 1,
								success(event) {
									prePage.$vm.reload()
								}
							});
						}, 2000)
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.uploadBlock {
		padding: 30rpx;

		.title {
			font-size: 32rpx;
			color: #202020;
		}
	}

	.uploadBox {
		width: 690rpx;
		height: 460rpx;
		border-radius: 6rpx;
		margin: 30rpx auto;
		background: #F4F8FF
	}

	/deep/button {
		width: 630rpx;
		height: 94rpx;
	}

	.fileList {
		display: flex;
		flex-wrap: wrap;

		.item {
			padding: 10rpx;
			overflow: hidden;
			width: 25%;
			margin-top: 20rpx;

			.pic {
				text-align: center;
				position: relative;
				text-align: center;

				.remove {
					position: absolute;
					top: -10rpx;
					right: 0;
					color: #FFF;
				}
			}

			.name {
				text-align: center;
				font-size: 24rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
		}
	}
</style>